/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight,
    Dimensions,
    Platform
} from 'react-native';

import {Actions,ActionConst} from 'react-native-router-flux';
import CommonStyles from '../styles/common';
import Colors from '../styles/colors';
import Ionicons from 'react-native-vector-icons/Ionicons';

import { List,WhiteSpace  } from 'antd-mobile';

const ListItem = List.Item;

export default class TabView extends Component {
    constructor (props) {
        super(props)
    }
    
    render() {
        //头像背景
        const userAvatarBg = !this.props.userInfo? styles.userAvatarofflineBg:styles.userAvataronlineBg;
        //头像图片
        var userAvatarImg = <Ionicons style={{color:'#ddd'}} name={(Platform.OS==='android'?'md':Platform.OS)+'-person'} size={45} />;
        //性别头像
        var genderImg=null;
        if(this.props.userInfo){
            if (this.props.userInfo.portrait){
                userAvatarImg =<Image source={{uri: this.props.userInfo.portrait}} style={[styles.userAvatar]}/>;
            }
            
            if(this.props.userInfo.gender){
                if(this.props.userInfo.gender=='1'){
                    genderImg = <View style={styles.userGenderImg}><Ionicons style={{color:'#fff'}} name={(Platform.OS==='android'?'md':Platform.OS)+'-male'} size={10} /></View>;
                }
                else if(this.props.userInfo.gender=='2'){
                    genderImg = <View style={styles.userGenderImg}><Ionicons style={{color:'#fff'}} name={(Platform.OS==='android'?'md':Platform.OS)+'-female'} size={10} /></View>;
                }
            }
        }
 
        return (
            <View style={[CommonStyles.container]}>
                <View style={styles.userCenterView}>
                    <View style={styles.userCenterInfo}>
                        <View style={[styles.userInfoAvatar,userAvatarBg]}>
                            <TouchableHighlight underlayColor={'transparent'} onPress={Actions.login}>
                                {userAvatarImg}
                            </TouchableHighlight>
                            {genderImg}
                        </View>
                        <View style={CommonStyles.marginTop10}>
                            <Text style={styles.userNameText}>{!this.props.userInfo?'点击头像登录':this.props.userName}</Text>
                        </View>                                    
                    </View>
                    {this.props.userInfo?
                        (<View style={styles.userInfoDetail}>
                            <TouchableHighlight style={styles.userInfoDetailColumn} underlayColor={'#fff'}>
                                <View style={styles.userInfoDetailColumnItem}>
                                    <Text style={styles.userInfoDetailColumnText}>{!this.props.userInfo.score?0:this.props.userInfo.score}</Text>
                                    <Text style={styles.userInfoDetailColumnText}>积分</Text>
                                </View>
                            </TouchableHighlight>
                            <TouchableHighlight style={styles.userInfoDetailColumn} underlayColor={'#fff'}>
                                <View style={styles.userInfoDetailColumnItem}>
                                    <Text style={styles.userInfoDetailColumnText}>{!this.props.userInfo.favoritecount?0:this.props.userInfo.favoritecount}</Text>
                                    <Text style={styles.userInfoDetailColumnText}>收藏</Text>
                                </View>
                            </TouchableHighlight>
                            <TouchableHighlight style={styles.userInfoDetailColumn} underlayColor={'#fff'}>
                                <View style={styles.userInfoDetailColumnItem}>
                                    <Text style={styles.userInfoDetailColumnText}>{!this.props.userInfo.followers?0:this.props.userInfo.followers}</Text>
                                    <Text style={styles.userInfoDetailColumnText}>关注</Text>
                                </View>
                                </TouchableHighlight>
                            <TouchableHighlight style={styles.userInfoDetailColumn} underlayColor={'#fff'}>
                                <View style={styles.userInfoDetailColumnItem}>
                                    <Text style={styles.userInfoDetailColumnText}>{!this.props.userInfo.fans?0:this.props.userInfo.fans}</Text>
                                    <Text style={styles.userInfoDetailColumnText}>粉丝</Text>
                                </View>   
                            </TouchableHighlight>                                                                                              
                        </View>)
                    :null}                 
                </View>
                <View style={CommonStyles.flex1}>
                    <List>
                        <ListItem thumb={<View style={styles.thumb}><Ionicons style={styles.thumbColor} name={(Platform.OS==='android'?'md':Platform.OS)+'-mail'} size={24} /></View>} arrow={'horizontal'}>消息</ListItem>
                        <ListItem thumb={<View style={styles.thumb}><Ionicons style={styles.thumbColor} name={(Platform.OS==='android'?'md':Platform.OS)+'-chatboxes'} size={24} /></View>} arrow={'horizontal'}>反馈</ListItem>
                    </List>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    userCenterView:{
        height:180,
        backgroundColor:Colors.default_theme       
    },
    userCenterBg: {
        height:150,
    },
    userCenterInfo:{
        flex:1,
        flexDirection: 'column',
        alignItems:'center',
        marginTop:20
    },
    userInfoAvatar:{
        width:50,
        height:50,
        alignItems:'center',
        justifyContent:'center',
        borderColor: '#ddd',
        borderWidth: 2,
        borderRadius: 25,
    },
    userAvatarofflineBg:{
        backgroundColor:'#bbb',
    },
    userAvataronlineBg:{
        backgroundColor:'#eee',
    },
    userAvatar:{
        width:48,
        height:48,
        borderWidth: 0,
        borderRadius: 24,
    },
    userNameText:{
        color:'#fff',
        fontSize:18
    },
    userInfoDetail:{
        flexDirection: 'row', 
        position: 'absolute',
        bottom:0,
        borderTopColor: '#87ceeb',
        borderTopWidth : 1,
        paddingTop:5
    },
    userInfoDetailColumn:{
        flex:1,
        height:45,
        alignItems:'center',
        justifyContent:'center',
    },
    userInfoDetailColumnItem:{
        flex:1,
        alignItems:'center',
    },
    userInfoDetailColumnText:{
        color:'#fff'
    },
    userGenderImg:{
        width:12,
        height:12,
        alignItems:'center',
        justifyContent:'center',
        position: 'absolute',
        bottom:0,
        right:0,
        backgroundColor:'#77C1FE',
        borderWidth: 0,
        borderRadius: 6,
    },
    thumb:{
        width:36,
        height:36,
        justifyContent:'center',
        alignItems:'center'
    },
    thumbColor:{
        color:'#ccc'
    }
});
